<template>
    <!-- 顶部导航 -->
    <header class=" header clearfix" :class="{bgHeader:$route.name!='home'}">
        <div class="wrap">
            <!-- logo -->
            <router-link class="ty-logo fl" :to="{name:'home'}">
                <img src="" alt="">
            </router-link>
            <!-- 顶部搜索 -->
            <div class="header-serch">
                <el-input  class="inline-input"
                    placeholder="输入影片关键词..."
                    @keyup.enter.native="goSearch"
                   @change="goSearch" v-model="state1"  suffix-icon="el-icon-search">
                </el-input>
                <!-- <el-row class="demo-autocomplete">
                    <el-col :span="12">
                        <el-autocomplete
                        class="inline-input"
                        v-model="state1"
                        :fetch-suggestions="querySearch"
                        placeholder="输入影片关键词..."
                        @select="handleSelect"
                        suffix-icon="el-icon-search"
                        ></el-autocomplete>
                        
                    </el-col>
                </el-row> -->
            </div>
            <!-- 快速导航 -->
            <div class="quick-nav fr flex">
                <router-link :to="{path:'/home'}"><i class="el-icon-location-outline"></i>个人</router-link>
            <router-link :to="{path:'/home'}"><i class="el-icon-time"></i>历史</router-link>
            <router-link :to="{path:'/home'}"><i class="el-icon-edit-outline"></i>留言</router-link>
                <router-link :to="{path:'/home'}"><i class="el-icon-share"></i>二维码</router-link>
            </div>
        </div>
    </header>
</template>
<style lang="scss">
// 引入scss的写法
header.bgHeader {
    .quick-nav {
        a {
            color:#333;
            i {
                color:#333;
            }
        }
    }
}
.header {
    position: absolute;
    top:0;
    left:50%;
    width:100%;
    height:70px;
    transform: translateX(-50%);
    z-index:9;
    .wrap {
        padding-top:8px;
        height: 70px;
    }
    .ty-logo {
        display:block;
        img {
        width: 120px;
        height: 50px;
        background:#000;
        }
    }
    .header-serch {
        position: absolute;
        left:50%;
        top:18px;
        width:290px;
        transform: translateX(-50%);
        input {
            width:290px;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 18px;
        }
    }
    .quick-nav {
        width: 260px;
        height: 70px;
        a {
            flex:1;
            color:#fff;
            font-size:14px;
            i {
                margin:0 auto;
                width: 18px;
                height: 18px;
                display:block;
            }
        }
    }
}

    
</style>
<script>
export default {
    // html字符渲染不识别大小写
    props:[''],
    data() {
        return {
            restaurants: [],
            state1: '',
        }
    },
    watch:{
  　'$route': function (to, from) {
　　　　// 拿到目标参数 to.query.id 去再次请求数据接口
        this.state1='';
　　}
  },
    methods:{
        goSearch(val) {
            // 跳转登陆页面
            if(this.state1) {
                this.$router.push({path:'/search',query:{
                    kw:this.state1
                }})
            }
        }
    },
    created() {
        // this.restaurants=this.loadAll();
    },
}
</script>